<template>
	<view class="Base">
		<view class="title">
			<view class="left">
				<uni-icons color="black" size="28" type="left" @click="back"></uni-icons>
			</view>
			<view class="center">{{ headTitle }}</view>
			<view class="right"></view>
		</view>

		<DateChooser :key="dateKeys" :defaultDate="date" @chooseDate="chooseDate" />

		<scroll-view scroll-y class="scroll">
			<Heart v-if="headTitleArr[0] === 'Heartrate'" :selectDateInfo="selectDateInfo" @tips="handleTips" />
			<Blood v-if="headTitleArr[0] === 'BloodOxygen'" :selectDateInfo="selectDateInfo" @tips="handleTips" />
			<Pressure v-if="headTitleArr[0] === 'Pressure'" :selectDateInfo="selectDateInfo" @tips="handleTips" />
			<Activity v-if="headTitleArr[0] === 'Activity'" :selectDateInfo="selectDateInfo" @tips="handleTips" />
			<Temperature v-if="headTitleArr[0] === 'Temperature'" :selectDateInfo="selectDateInfo" @tips="handleTips" />
			<Sleep v-if="headTitleArr[0] === 'Sleep'" showHead showOther :selectDateInfo="selectDateInfo" @tips="handleTips" />

			<view class="placeholder"></view>
		</scroll-view>

		<BottomDrawer
			v-model="showTip"
			:show-title="false"
			maskBg="rgba(19, 19, 19, 0.9)"
			background="linear-gradient(180deg, #B9E8FF 0%, #FFFFFF 51.46%);
		"
		>
			<view class="box">
				<view class="head">
					<image class="w-92rpx" :src="tips.icon" mode="widthFix"></image>
					<text class="title">{{ tips.title }}</text>
				</view>
				<scroll-view scroll-y class="tip">
					<view> {{ tips.tip }}</view>
				</scroll-view>
			</view>
		</BottomDrawer>
	</view>
</template>
<script>
import DateChooser from "@/pages/ring/components/DateChooser.vue";
import dayjs from "dayjs";

import Heart from "./heart.vue";
import Blood from "./blood.vue";
import Pressure from "./pressure.vue";
import Activity from "./activity.vue";
import Sleep from "./sleep.vue";
import Temperature from "./temperature.vue";

import BottomDrawer from "@/components/drawer/BottomDrawer.vue";

export default {
	components: {
		DateChooser,
		Heart,
		Blood,
		Pressure,
		Activity,
		Sleep,
		Temperature,
		BottomDrawer,
	},
	data() {
		return {
			date: "",
			dateKeys: 0,
			headTitle: "",
			headTitleArr: [],
			selectDateInfo: {},

			showTip: false,
			tips: {
				tip: "",
				icon: "",
				title: "",
			},
		};
	},

	onLoad(opt) {
		console.log("opt", opt);

		const option = opt;

		console.log("option", option);

		this.headTitleArr = option.type?.split(" ") || [];
		this.headTitle = option.title;
		this.date = option.date;
		this.dateKeys = new Date().getTime();

		console.log(this.date);
	},

	methods: {
		chooseDate(value) {
			console.log("chooseDate", value);
			const { type, startMoment: startTime, endMoment: endTime } = value;
			this.selectDateInfo = { type, startTime: dayjs(startTime).format("YYYY-MM-DD"), endTime: dayjs(endTime).format("YYYY-MM-DD") };
			console.log("this.selectDateInfo", this.selectDateInfo);
		},

		back() {
			uni.navigateBack();
		},

		handleTips(tips) {
			// this.tips = tips;
			// this.showTip = true;

			uni.navigateTo({
				url: `../illustrate/index?type=${tips}`,
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.scroll {
	height: calc(100vh - var(--status-bar-height) - 44rpx - 40rpx - 200rpx);

	.placeholder {
		height: 10rpx;
	}
}

.Base {
	width: 100vw;
	height: 100vh;
	background-color: #cee7f8;
	padding: 0 24rpx;
	padding-top: var(--status-bar-height);

	.navbar {
		// background-color: #0f0f0f;
		:deep(.navbar_wrap) {
			.left-btn {
				padding: 0;
			}
		}
	}

	.dataSelect_component {
		margin-top: 16rpx;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 88rpx;
		margin: 20rpx 0 10rpx 0;

		& > view {
			flex: 1;
			min-height: 10rpx;
		}

		.center {
			color: black;
			font-weight: 500;
			text-align: center;
			font-size: 36rpx;
		}
	}
}

.bottom_compute_tips_day {
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(141, 141, 141, 0.84);
	font-family: Inter;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin-top: 32rpx;
}

.box {
	padding: 40rpx;
	color: black;

	.head {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.title {
			margin-left: 8rpx;

			font-size: 32rpx;
			font-weight: 500;
			line-height: 50rpx;
			text-align: left;
		}
	}

	.tip {
		white-space: pre-line;
		height: 400rpx;
		overflow-y: scroll;
	}

	.w-92rpx {
		width: 92rpx;
	}
}
</style>
